{"id":13249,"date":"2019-02-22T15:01:32","date_gmt":"2019-02-22T15:01:32","guid":{"rendered":"https:\/\/www.gravityforms.com\/?p=13249"},"modified":"2019-05-15T12:54:28","modified_gmt":"2019-05-15T16:54:28","slug":"gutenberg-gravity-forms","status":"publish","type":"post","link":"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/","title":{"rendered":"How to Use Gutenberg with Gravity Forms"},"content":{"rendered":"

\"Using<\/a><\/p>\n

Gutenberg with Gravity Forms<\/h2>\n

With the introduction of version 5.0, the team at WordPress have released the Gutenberg plugin as their default editor. If you install WordPress from this point forward or update your existing version, you\u2019ll see the classic editor has been replaced with the Gutenberg editor.<\/p>\n

If you are unfamiliar with Gutenberg, we've prepared a small introduction for you below this article. Click here<\/a> to read it.<\/div>\n

Since WordPress 5.0 removed the classic editor, you\u2019ll notice the Add Forms<\/strong> button that embeds a Gravity Form has been removed. But do not worry! There are a few ways you can use Gutenberg with Gravity Forms. There are a three methods to add a Gravity Form to a page or post:<\/p>\n

1. Install the Gravity Forms Gutenberg Block (Recommended)<\/h3>\n

This is the cleanest and simplest method, so it's the one we recommend to all Gravity Forms users. We strongly<\/strong> recommend you get used to using Gutenberg blocks, because this is how WordPress will be developed in the future.<\/p>\n

<\/p>\n

First, download the Gravity Forms Gutenberg Add-On from our Downloads Page<\/a>.<\/p>\n

\"Gravity<\/a><\/p>\n

This will add a block to the Gutenberg editor. Inside the editor, click the plus symbol to add a new block, open the \u201cembeds\u201d category, select \u201cGravity Forms,\u201d then use the drop down menu to choose the form you want to display.<\/p>\n

\"Gutenberg<\/p>\n

Creating forms and editing their structure still takes place in the standard Gravity Forms editor. You can find this in the usual place - the left sidebar in the WordPress dashboard.<\/p>\n

Once you choose a form, a preview will display right in the editor. This is a new feature to help you visualize how the form will look on your page. Keep in mind, however, that the limited space of the editor (it\u2019s not very wide and still constrained by the WordPress dashboard) means the form won\u2019t look exactly like it will on your page. You\u2019ll have to preview\/view the page to make sure it looks how you want to.<\/p>\n

You\u2019ll notice a panel on the right with more settings whenever you select a block. This panel is available for Gravity Forms block as well.<\/p>\n

Form Title<\/strong> toggles the form\u2019s title on and off. Form Description<\/strong> toggles the description on or off. The conditional logic<\/strong> settings let you hide or display a form based on rules you set. For instance, you could set a form to only appear after a certain date.<\/p>\n

\"Gutenberg<\/p>\n

Finally, if you intend to use this same form elsewhere on your site, you can save the block to be reusable. A reusable block retains all of its settings so you don\u2019t have to reconfigure it on every page. Click the vertical ellipse icon and then \u201cconvert to reusable block.\u201d<\/p>\n

\"Gutenberg<\/p>\n

2. Create a Gutenberg Shortcode Block<\/h3>\n

If you prefer to use the shortcode, add a Gutenberg shortcode block.<\/p>\n

\"Gutenberg<\/p>\n

Next, type or paste your shortcode into the space provided.<\/p>\n

\"Gutenberg<\/p>\n

Using this method, the form will display properly on your page, but you won't see it in the editor. You also won't have access to the settings panel. You'll have to adjust any sightings in the short code itself.<\/p>\n

3. Install the Classic Editor and Embed a Shortcode<\/h3>\n

We strongly<\/strong> recommend every WordPress user get familiar with Gutenberg. We understand it\u2019s a big change for some people, especially people with web development skills who don\u2019t mind code. But you\u2019ll find Gutenberg to be a much<\/em> faster editor once you get used to it.<\/p>\n

That said, if you really don\u2019t want to use Gutenberg, you have the option of installing the Classic Editor plugin<\/a>. This plugin brings back the classic editor. Then you can embed a Gravity Forms shortcode like you did before Gutenberg. However, we really recommend our users get familiar using\u00a0Gutenberg with Gravity Forms since it has become the default WordPress Editor.<\/p>\n

If you would like to learn more about how to use Gutenberg, we have prepared a free guide for you below.<\/p>\n

[content_upgrade cu_id=\"13218\"]Free download: Best Practices for Creating Great Pages with Gutenberg[content_upgrade_button]Click Here[\/content_upgrade_button][\/content_upgrade]<\/p>\n

If you are unfamiliar with Gutenberg, we've prepared a small introduction to the new editor below.<\/div>\n

WordPress 5.0 and the Introduction of the Gutenberg editor<\/h2>\n

\"Gutenberg<\/p>\n

Gutenberg is a new editor that replaces the classic editor. It gives you more creative control over the layout and appearance of your content. Creating content feels more like building and less like writing.<\/p>\n

The developers\u2019 had three goals when they designed WordPress 5.0 and the Gutenberg editor:<\/p>\n

    \n
  • Get users to create more content with rich media as opposed to boring, text-heavy content.<\/li>\n
  • Unify the way you interact with the interface. They don\u2019t want you to have to write shortcodes or custom HTML, or paste URLs to embed content\/widgets. Instead, they want you to only<\/em> know how to use the blocks.<\/li>\n
  • Make the core features more discoverable. They want to put all the possible types of content available right in the blocks menu so you don\u2019t have to search for features or string together plugins.<\/li>\n<\/ul>\n

    Considering that WordPress was originally just a blogging tool that\u2019s been nudged toward a web development platform over the years, Gutenberg is a big leap in that direction. It\u2019s a powerful tool that gives non-designers and non-developers greater control over their websites.<\/p>\n

    Additionally, WordPress has taken steps to embrace JavaScript and React.js, which means it continues to march toward modern web standards.<\/p>\n

    Using Gutenberg<\/h2>\n

    Instead of dropping all of your content into a generic editor, Gutenberg lets you control how your content is displayed by offering numerous \u201cblocks.\u201d Each block has a specific purpose. For instance, the paragraph block is for paragraph text. The image block is for inserting images. You get the idea.<\/p>\n

    To add a block to a page or post with Gutenberg, simply select the block you want to use next. You drag blocks around the page to place them exactly where you like.<\/p>\n

    \u201cBut wait,\u201d you\u2019re thinking, \u201cInserting images and paragraphs was easy before Gutenberg. Why did they change all that?\u201d<\/p>\n

    For one, this method of stacking blocks give you more control over the final design of your page without<\/em> having to touch the code. You won\u2019t have to add repetitive <br> tags to get the page just right or dig into the code editor to add inline styles.<\/p>\n

    For another, Gutenberg gives you more layout options that you had previously. The layout blocks, for example, let you create columns, buttons, and breaks with the click of a button.<\/p>\n

    \"Gutenberg<\/p>\n

    And third, Gutenberg blocks let you use widgets right in your content area, which wasn\u2019t possible in the past unless those widgets came with shortcode functionality.<\/p>\n

    \"Gutenberg<\/p>\n

    If you would like to learn more about how to use Gutenberg, we have prepared a free guide for you below.<\/p>\n

    [content_upgrade cu_id=\"13218\"]Free download: Best Practices for Creating Great Pages with Gutenberg[content_upgrade_button]Click Here[\/content_upgrade_button][\/content_upgrade]<\/p>\n

    The Future of WordPress<\/h2>\n

    The people at WordPress intend to make their platform the most comprehensive content management system available. We have no doubt that they\u2019ll continue to release features and updates over time that make WordPress a more valuable tool than it already is. Gravity Forms will grow right alongside so it continues to be the go-to forms tool for WordPress users. We hope this guide will make transition of using Gutenberg with Gravity Forms an easy process.<\/p>\n

    \n

    We Love Your Feedback!<\/h3>\n

    Did you know that many<\/strong> enhancements available in Gravity Forms were added because of customer requests<\/strong>? Is there a feature you'd love to see in a future version<\/strong> of Gravity Forms?<\/p>\n

    Let us know in the comments below<\/strong>!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    Gutenberg with Gravity Forms With the introduction of version 5.0, the team at WordPress have released the Gutenberg plugin as their default editor. If you install WordPress from this point forward or update your existing version, you’ll see","protected":false},"author":212026,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[5850,2100,2023,5957],"yoast_head":"\nGutenberg with Gravity Forms | Learn how to use Gutenberg in your forms<\/title>\n<meta name=\"description\" content=\"Get started using Gutenberg with Gravity Forms! We've put together a guide to show you how to use the new Gutenberg editor with Gravity Forms\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Gutenberg with Gravity Forms\" \/>\n<meta property=\"og:description\" content=\"Get started using Gutenberg with Gravity Forms! We've put together a guide to show you how to use the new Gutenberg editor with Gravity Forms\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"Gravity Forms\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GravityForms\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-22T15:01:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-15T16:54:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2019\/02\/Gravity-Forms-Gutenberg-WordPressGravity-Forms-Gutenberg-WordPress.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Use Gutenberg with Gravity Forms\" \/>\n<meta name=\"twitter:description\" content=\"Gutenberg with Gravity Forms With the introduction of version 5.0, the team at WordPress have released the Gutenberg plugin as their default editor. If\" \/>\n<meta name=\"twitter:creator\" content=\"@GravityForms\" \/>\n<meta name=\"twitter:site\" content=\"@GravityForms\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gravityforms.com\/#organization\",\"name\":\"Gravity Forms\",\"url\":\"https:\/\/www.gravityforms.com\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/GravityForms\",\"https:\/\/twitter.com\/GravityForms\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gravityforms.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/06\/gravity_forms_logo.jpg\",\"contentUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/06\/gravity_forms_logo.jpg\",\"width\":268,\"height\":294,\"caption\":\"Gravity Forms\"},\"image\":{\"@id\":\"https:\/\/www.gravityforms.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gravityforms.com\/#website\",\"url\":\"https:\/\/www.gravityforms.com\/\",\"name\":\"Gravity Forms\",\"description\":\"WordPress Contact Forms\",\"publisher\":{\"@id\":\"https:\/\/www.gravityforms.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.gravityforms.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2019\/02\/Gravity-Forms-Gutenberg-WordPressGravity-Forms-Gutenberg-WordPress.jpg\",\"contentUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2019\/02\/Gravity-Forms-Gutenberg-WordPressGravity-Forms-Gutenberg-WordPress.jpg\",\"width\":1600,\"height\":900,\"caption\":\"Using Gravity Forms with Gutenberg-WordPressGravity-Forms Gutenberg WordPress\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#webpage\",\"url\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/\",\"name\":\"Gutenberg with Gravity Forms | Learn how to use Gutenberg in your forms\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityforms.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#primaryimage\"},\"datePublished\":\"2019-02-22T15:01:32+00:00\",\"dateModified\":\"2019-05-15T16:54:28+00:00\",\"description\":\"Get started using Gutenberg with Gravity Forms! We've put together a guide to show you how to use the new Gutenberg editor with Gravity Forms\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Gravity Forms\",\"item\":\"https:\/\/www.gravityforms.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/www.gravityforms.com\/category\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Gutenberg with Gravity Forms\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/person\/f7b736ccde762e1d421bede4b35e5436\"},\"headline\":\"How to Use Gutenberg with Gravity Forms\",\"datePublished\":\"2019-02-22T15:01:32+00:00\",\"dateModified\":\"2019-05-15T16:54:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#webpage\"},\"wordCount\":1300,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.gravityforms.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2019\/02\/Gravity-Forms-Gutenberg-WordPressGravity-Forms-Gutenberg-WordPress.jpg\",\"keywords\":[\"Content\",\"Gravity Forms\",\"WordPress\",\"WordPress 5.0\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.gravityforms.com\/gutenberg-gravity-forms\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/person\/f7b736ccde762e1d421bede4b35e5436\",\"name\":\"Jonathan Calderon\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gravityforms.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c59c86dae9ee0fffcaf1ada0e422205a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c59c86dae9ee0fffcaf1ada0e422205a?s=96&d=mm&r=g\",\"caption\":\"Jonathan Calderon\"},\"url\":\"https:\/\/www.gravityforms.com\/author\/jrocketboy\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts\/13249"}],"collection":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/users\/212026"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/comments?post=13249"}],"version-history":[{"count":0,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts\/13249\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/media?parent=13249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/categories?post=13249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/tags?post=13249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}